<template>
  <div class="car_list page_top">
    <ul class="work_list">
      <li v-for="item in carList">
        <router-link :to="{name:'Commods',params:{workid:item.workid}}">
          <div class="imgs">
            <img src="../../static/image/qiche_test.jpg" alt="">
            <span class="Car_list_tab">{{item.tab}}</span>
          </div>
          <div class="info">
            <p class="name">{{item.name}}</p>
            <p class="yeat_gl">{{item.yaers}}</p>
            <p class="jiage"><span>{{item.xj}}万</span><s>{{item.yj}}万</s></p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<style>

</style>
<script>

  export default{
    data(){
      return {
        msg: 'hello vue',
        carList: [
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '1', tab: '练手车'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '2', tab: '急售'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '3', tab: '练手车'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '4', tab: '准新车'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '5', tab: '推荐'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '1', tab: '练手车'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '2', tab: '练手车'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '3', tab: '急售'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '4', tab: '练手车'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '5', tab: '练手车'}
        ],
      }
    },
    components: {},
    methods: {
      handleScroll () {
        let view_height = $(window).innerHeight() - 138
        let con_height = $('.car_list').height()
        let scroll_height = $('body').scrollTop()
        if (con_height - view_height - scroll_height <= 0) {
          this.carList.push(
            {name: '五菱宏光 2014款 1.2L S标准型1', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '4', tab: '练手车'},
            {name: '五菱宏光 2014款 1.2L S标准型2', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '5', tab: '练手车'}
          )
        }
      }
    },
    created: function () {
      window.addEventListener('scroll', this.handleScroll);
    }
  }
</script>
